<template>
  <ul>
    <li v-for="(item, index) in arr" :key="item" @click="handleDel(index)">{{ item }}</li>
  </ul>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {
    // !需要使用 reactive 把普通的数据包装成响应式的对象
    const arr = reactive(['a', 'b', 'c'])
    const handleDel = (index) => {
      arr.splice(index, 1)
      // 数据确实删了，只不过不是响应式的
      // console.log(arr)
    }
    return {
      arr,
      handleDel,
    }
  },
}
</script>
